import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Platform, Image, Dimensions } from "react-native"
import { BookOpen, X } from "lucide-react-native"
import { theme } from "../../constants/theme"
import Swipeable from "react-native-gesture-handler/Swipeable"

const { height } = Dimensions.get("window")

interface BookshelfViewProps {
    books: Array<{
        id: string
        name: string
        wordCount: number
    }>
    onDeleteBook: (bookId: string) => void
    onSelectBook: (book: any) => void
    allowDelete?: boolean
    emptyMessage?: string
    emptyDescription?: string
}

export default function BookshelfView({
    books,
    onDeleteBook,
    onSelectBook,
    allowDelete = true,
    emptyMessage = "暂无书籍",
    emptyDescription = "从辞书库中添加你想学习的书籍",
}: BookshelfViewProps) {
    const renderRightActions = (bookId) => {
        if (!allowDelete) return null

        return (
            <View style={styles.deleteActionContainer}>
                <TouchableOpacity style={styles.deleteAction} onPress={() => onDeleteBook(bookId)}>
                    <X size={20} color={theme.colors.neutral.white} />
                    <Text style={styles.deleteActionText}>删除</Text>
                </TouchableOpacity>
            </View>
        )
    }

    if (books.length === 0) {
        return (
            <View style={styles.emptyState}>
                <Image source={{ uri: "https://cdn-icons-png.flaticon.com/512/4341/4341093.png" }} style={styles.emptyIcon} />
                <Text style={styles.emptyText}>{emptyMessage}</Text>
                <Text style={styles.emptyDescription}>{emptyDescription}</Text>
            </View>
        )
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            <View style={styles.shelfContainer}>
                {books.map((book) =>
                    allowDelete ? (
                        <Swipeable key={book.id} renderRightActions={() => renderRightActions(book.id)}>
                            <BookItem
                                book={book}
                                onPress={() =>
                                    onSelectBook({
                                        id: book.id,
                                        title: book.name,
                                        subtitle: `我的书架 · ${book.wordCount}词`,
                                        mastered: Math.floor(Math.random() * 10),
                                        learning: Math.floor(Math.random() * 15),
                                        total: book.wordCount,
                                    })
                                }
                            />
                        </Swipeable>
                    ) : (
                        <BookItem
                            key={book.id}
                            book={book}
                            onPress={() =>
                                onSelectBook({
                                    id: book.id,
                                    title: book.name,
                                    subtitle: `我的书架 · ${book.wordCount}词`,
                                    mastered: Math.floor(Math.random() * 10),
                                    learning: Math.floor(Math.random() * 15),
                                    total: book.wordCount,
                                })
                            }
                        />
                    ),
                )}
                {allowDelete && <Text style={styles.swipeHint}>左滑可删除书籍</Text>}
            </View>
        </ScrollView>
    )
}

// 提取出BookItem组件以便重用
function BookItem({ book, onPress }) {
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={styles.bookItem}>
                <View style={styles.bookItemLeft}>
                    <View style={styles.bookIcon}>
                        <BookOpen size={24} color={theme.colors.primary.default} />
                    </View>
                    <Text style={styles.bookItemTitle}>{book.name}</Text>
                </View>
                <Text style={styles.wordCount}>{book.wordCount}词</Text>
            </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    shelfContainer: {
        flex: 1,
        padding: theme.spacing.lg,
    },
    bookItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.neutral.white,
        padding: theme.spacing.lg,
        marginBottom: theme.spacing.md,
        borderRadius: theme.borderRadius.large,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    bookItemLeft: {
        flexDirection: "row",
        alignItems: "center",
    },
    bookIcon: {
        width: 44,
        height: 44,
        borderRadius: 8,
        backgroundColor: `${theme.colors.primary.default}15`,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    bookItemTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
    },
    wordCount: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    deleteActionContainer: {
        width: 100,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: theme.spacing.md, // 添加与书籍项相同的底部间距
    },
    deleteAction: {
        backgroundColor: theme.colors.secondary.red.default,
        justifyContent: "center",
        alignItems: "center",
        width: 80,
        height: 76, // 设置一个固定高度，与书籍项高度匹配
        borderRadius: theme.borderRadius.large,
        flexDirection: "column",
        gap: theme.spacing.xs,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.2)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    deleteActionText: {
        color: theme.colors.neutral.white,
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
    },
    swipeHint: {
        textAlign: "center",
        color: theme.colors.neutral.gray,
        fontSize: theme.fontSize.sm,
        marginTop: theme.spacing.xl,
    },
    emptyState: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        paddingTop: height * 0.15,
    },
    emptyIcon: {
        width: 80,
        height: 80,
        marginBottom: theme.spacing.xl,
        opacity: 0.7,
    },
    emptyText: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.md,
    },
    emptyDescription: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
        textAlign: "center",
    },
})

